<template>
    <div class="accidentPic">
        <div class="title-Wrap">
            <p class="title">上传事故照片<span>（请横置手机拍摄，可参考范例）</span></p>
        </div>
        <div class="sec-picUp">
            <div class="picRows">
                <div v-for="(item,index) in picList" :key="index">
                    <div class="picShow">
                        <img :src="item.uploadImg || item.imgUrl" alt="" @click="previewUploadImg_rk(index)">
                        <!-- <img :src="item.uploadImg||item.imgUrl" alt=""  v-preview="item.uploadImg"> -->
                        <input :id="'file'+index" accept="image/*" type="file" @change="addImg(item,index)" style="display:none">
                        <!-- 删除按钮 -->
                        <span @click="deleteImg(item,index)" v-show="!!item.uploadImg" :class="{hide_X:ismove}"></span>
                        <!-- 加号上传 -->
                        <div class="upBtn" :class="{hide: !!item.uploadImg}">
                            <img @click="startUpload(index)" src="../../assets/img/accidentPicUpBtn.png" alt="">
                        </div>                        
                        <!-- 扫描效果 -->
                        <div class="scanWrap" :class="{show:ismove}">
                            <img src="../../assets/img/sm_bg.png" class="scanStyle" :style="{top:(ismove?topNumber:'-100%')}" />
                        </div>
                    </div>
                    <p>{{item.title}}<span class="showBtn" @click="previewBgPic(item.imgUrl)">范例</span></p>
                </div>
            </div>
            <div class="picRows">
                <div>
                    <div class="picShow">
                        <img :src="otherImg.otherImgUrl" alt="" @click="previewOtherImg">
                        <input id="file5" accept="image/*" type="file" @change="addImg()" style="display:none">
                        <span @click="deleteImg(otherImg)" v-show="!!otherImg.otherImgUrl" :class="{hide_X:ismove}"></span>
                        <div  class="upBtn" :class="{hide: !!otherImg.otherImgUrl}">
                            <img @click="startUpload(5)" src="../../assets/img/accidentPicUpBtn.png" alt="">
                        </div>                       
                        <!-- 扫描效果 -->
                        <div class="scanWrap" :class="{show:(ismove&&otherImg.otherImgUrl)}">
                            <img src="../../assets/img/sm_bg.png" class="scanStyle" :style="{top:(ismove?topNumber:'-100%')}" />
                        </div>
                    </div>
                    <p>其他照片（选填）</p>
                </div>
                <div>
                    <div class="picShow_">
                        <img src="" alt=""><span></span>
                        <div>
                            <img src="" alt="">
                        </div>
                    </div>
                    <p><span></span></p>
                </div>
            </div>
        </div>
        <div class="funBtn">
            <mu-container class="demo-container">
                <mu-row gutter>
                    <mu-col span="4">
                        <div class="grid-cell" @click="deleteAllImg">
                            <mu-button :disabled="grayFlag" full-width>一键删除</mu-button>
                        </div>
                    </mu-col>
                    <mu-col span="8">
                        <div class="grid-cell">
                            <!-- #6794F5 -->
                            <mu-button @click="checkRes" :disabled="grayFlag2" class="blue"  full-width>提交</mu-button>
                        </div>
                    </mu-col>
                </mu-row>
            </mu-container>
        </div>
        <!-- 点击“一键删除”按钮，弹窗出来提示 -->
        <div class="promptWrap">
            <div class="promptBg">
                <div class="prompt">
                    <h3>一键删除</h3>
                    <p>是否一键删除所有已上传的照片</p>
                    <div>
                        <span>取消</span><span class="color_red">确认</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 预览轮播 -->
        <div class="picWrap" v-if="showPic">
            <div class="yl delete-btn" @click='hiddenPicWrap()'></div>
            <div class="showPicSec" @touchmove='touchMove'>
                <slider :pages='pages' :sliderinit='sliderinit'></slider>
                <!-- <vue-slider v-ref:slider :value.sync="value"></vue-slider> -->
            </div>
        </div>
        <!-- 范例图预览 -->
        <div class="bg-preview" ref="bgPreview" @click="hiddenPreviewPic">
            <div class="delete-btn"></div>
            <img src="" ref='bgPic'/>
        </div>  
        <!-- loading tip -->
        <div v-loading="loadToggle" data-mu-loading-overlay-color="rgba(0,0,0,.6)" class="loading"></div>
        <toast msg='图片上传失败，请稍后再试' ref="toast"></toast>
    </div>
</template>
<script>
    import Toast from '../../common/toast/toast.vue'
    import {http} from 'utils/request.js';
    import {initUpLoad, getImgToken, upLoadImg, getAccidentInfo, compressImg} from 'utils/commonUtil.js';
    import api from '../../api/index.js';
    import {EXIF} from 'exif-js'    
    import slider from 'vue-concise-slider'
    // import vueSlider from 'vue-slider-component'
    export default{
        name:"accidentPic",
        components: {
            slider,
            Toast
        },
        data() {
            return { 
                grayFlag:false,
                grayFlag2:false,
                active:0,
                orientation: "",//图片方向
                cheng:false,  //修复bug
                cycle:false, //关闭周期性播放
                hideControls:true,
                uploadImgArr: [], //图片轮播数组
                checkFlag:true, //控制校验过程中重复校验
                loadToggle:false, //图片加载中提示
                index:"",  //操作图片的index
                accidentNo: "",
                imgTimer: "",
                otherImg: {
                    otherImgUrl: "", //其他图url
                    key: "",  //其他图key
                },
                picList:[
                    {
                        imgId: "01",
                        key: "",
                        defaultImg: require('../../assets/img/pic-QuanJing1.jpg'),
                        uploadImg: "", // 上传的图片
                        imgUrl: require('../../assets/img/pic-QuanJing1.jpg'), //背景图
                        title: "全景照片（车头）"
                    },
                    {   
                        imgId: "02",
                        key: "",
                        defaultImg: require('../../assets/img/pic-QuanJing2.jpg'),
                        uploadImg: "",
                        imgUrl: require('../../assets/img/pic-QuanJing2.jpg'),
                        title: "全景照片（车尾）"
                    },
                    {
                        imgId: "03",
                        key: "",
                        defaultImg: require('../../assets/img/pic-JinJing1.jpg'),
                        uploadImg: "",
                        imgUrl: require('../../assets/img/pic-JinJing1.jpg'),
                        title: "近景照片（车头）"
                    },
                    {   
                        imgId: "04",
                        key: "",
                        defaultImg: require('../../assets/img/pic-JinJing2.jpg'),
                        uploadImg: "",
                        imgUrl: require('../../assets/img/pic-JinJing2.jpg'),
                        title: "近景照片（车尾）"
                    }
                ],                
                ismove: false,
                topNumber: '',
                timeFlag: '', //  用于判断责任校验请求发送到接收到数据的时间

                deleteFlag:null,  //用户是否删除图片
                // 阮凯测试轮播
                //滑动配置[obj]
                sliderinit: {
                    currentPage: 0,//当前页码
                    thresholdDistance: 60,//滑动判定距离
                    // thresholdTime: 100,//滑动判定时间
                    // autoplay:3000,//自动滚动[ms]
                    loop:true,//循环滚动
                    direction:'horizontal',//方向设置，垂直滚动
                    infinite:1,//无限滚动前后遍历数
                    slidesToScroll:1,//每次滑动项数
                },
                pages: '',
                value: 1,
                showPic: 0
            }
        },
        watch:{
            // active:function(val,oldVal){
            //     this.active = val;
            // }
            cheng:function(val,oldVal){

            }
        },
        created() {
            document.title = '现场照片';
        },
        mounted() {
            //获取事故编号
            const accidentNo = this.$route.query.accidentNo;
            const fromPage = this.$route.query.fromPage;
            this.accidentNo = accidentNo;
            //如果从案件列表过来
            this.initData();
        },
        methods: {
            touchMove() {
                
            },
            change(index){
                console.log(index);
            },
            //其它图片轮播
            previewOtherImg(){
                let picList = this.picList;
                let uploadImgArr = [this.otherImg.otherImgUrl];
                for (let i = 0; i < picList.length; i++) {
                    uploadImgArr.push(picList[i].uploadImg);
                };
                // 把uploadImgArr中的空值去除掉
                for(let k = 0; k < uploadImgArr.length; k++) {
                    if(uploadImgArr[k] == "" || typeof(uploadImgArr[k]) == "undefined") {
                        uploadImgArr.splice(k,1);
                        k= k-1;
                    };
                };
                let arr3 = [];
                for (let n = 0; n < uploadImgArr.length; n++) {
                    arr3[n] = {
                        title: '',
                        style: {
                            background: 'url(' + uploadImgArr[n] + ')'
                        }
                    }
                };
                this.pages = arr3;            
                // 显示轮播浮层
                this.showPic = 1;
            },
            // 阮凯测试图片轮播功能
            previewUploadImg_rk(index) {
                this.sliderinit.currentPage = 0;
                this.pages = [];
                var picList = this.picList;
                var uploadImgArr = [];
                for (var i = 0; i < picList.length; i++) {
                    uploadImgArr.push(picList[i].uploadImg);
                }
                var arr1 = uploadImgArr.slice(index, uploadImgArr.length);
                var arr2 = uploadImgArr.slice(0, index); 
                // 遍历第二个数组，添加到第一个数组
                if(arr2.length>0) {
                    for (var j = 0; j < arr2.length; j++) {
                        arr1.push(arr2[j]);                        
                    }
                };
                // 把arr1中的空值去除掉
                for(var k = 0; k < arr1.length; k++) {
                    if(arr1[k] == "" || typeof(arr1[k]) == "undefined") {
                        arr1.splice(k,1);
                        k= k-1;
                    };
                };
                if(this.otherImg.otherImgUrl) {
                    arr1.push(this.otherImg.otherImgUrl)
                };

                var arr3 = [];
                for (var n = 0; n < arr1.length; n++) {
                    arr3[n] = {
                        title: '',
                        style: {
                            background: 'url(' + arr1[n] + ')'
                        }
                    }
                };

                this.pages = arr3;
               
                // 显示轮播浮层
                this.showPic = 1;
            },
            hiddenPicWrap() {
                this.sliderinit.currentPage = 0;
                this.showPic = 0;
            },
            //查询之前上传过的图片
            initData() {
                http.post(api.API_QUERY_IMAGE,{
                    accidentNo:this.accidentNo, //事件id
                    type: "five"
                }).then(((res) => {
                    if(res.code=="1"&&res.resultObj) {
                        res.resultObj.forEach((value,index)=>{
                            this.picList.forEach((val,ind)=>{
                                if(value.photoType==val.imgId) {
                                    this.picList[ind].uploadImg = value.photoUrl;
                                    this.picList[ind].key = value.photoId;
                                }
                            }); 
                            //处理其他照片的显示
                            if(value.photoType=="05") {
                                this.otherImg.otherImgUrl = value.photoUrl;
                                this.otherImg.key = value.photoId;
                            }
                        });
                    }
                })).catch((error) =>{
                    console.log(error);
                });
            },
            //点击上传照片
            startUpload(index) {
                console.log('----是否已选图片------');
                document.querySelector("#file"+index).click();
            },
            //预览已上传的图片

            //
            //预览背景图
            previewBgPic(url){
                this.$refs.bgPic.src = url;
                // this.$refs.bgPreview.style
                this.$refs.bgPreview.style.display = "block";
            },
            //隐藏预览图
            hiddenPreviewPic(){
                this.$refs.bgPreview.style.display = "none";
            },
            //选择照片
            addImg(data) {
                let _event = event;
                const params = {};
                params.timestamp = Date.now();
                const file = _event.target.files[0];
                console.log("kaishi",file);
                //获取图片的方向
                this.getPhotoDir(file);
                console.log("压缩前",file);
                // ***********************************************************************************ruankai
                let ext = file.name.substr(file.name.lastIndexOf('.')+1);
                if(ext!='jpg' && ext!='jpeg') {
                    _event.target.value = ""; //清空之前的图片
                    this.$toast.message({
                         message: '请选择jpg或jpeg格式照片',
                         color: '#F57979'
                     });
                    return
                }
                // ***************************************************************************************
                this.loadToggle = true;//加载中
                //图片压缩
                getImgToken().then(res=>{
                    params.token = res.resultObj;
                    return compressImg(file);
                }).then(res=>{
                    //解决压缩后没有name
                    if(!res.file.name) res.file.name = file.name;
                    params.file = res.file;
                    console.log("压缩后",res.file);
                    return upLoadImg(params);
                }).then(res=>{
                    console.log('-----网关1-----');
                    console.log(res);
                    if(data) {
                        params.file.photoType = data.imgId;
                    }else{
                        params.file.photoType = "05";
                    };
                    _event.target.value = ""; //清空之前的图片
                    params.file.key = res.key;
                    params.file.orientation = this.orientation;
                    this.saveImageInfo(params.file, data);
                }).catch((error) => {
                    console.log('-----网关3-----');
                     this.loadToggle = false;
                    this.$refs.toast.open();
                    setTimeout(()=>{
                        this.$refs.toast.close();
                    },3000);
                });
            },
            // 图片加载中提示
            loading(){
                const loading = this.$loading({
                    // ...options
                });
                setTimeout(() => {
                    loading.close();
                },3000);
            },
            //点击责任校验证
            checkRes() {
                if(!this.checkIsDownImg()) {
                    this.$toast.message({
                         message: '请先上传照片！',
                         color: '#F57979'
                     });
                    return;
                };
                this.grayFlag = true;
                this.grayFlag2 = true;
                this.startMove();
                //if(this.checkFlag){
                    //this.checkFlag = false;
                    http.post(api.API_RES_CHECK,{
                        accidentNo:this.accidentNo, //事件id
                    }).then(((res) => {
                        //this.checkFlag = true;
                        //this.deleteBtnBgColor = '#F57979'; //校验完成再次置为红色
                        let nowTimeFlag = new Date().getTime() - this.timeFlag;
                        if(res.code=="1") {
                            // 处理扫描状态
                            //this.grayFlag = false;
                            //this.grayFlag2 = false;
                            
                            if (nowTimeFlag > 4000) {
                                this.ismove = false;
                                //放开按钮
                                this.grayFlag = false;
                                this.grayFlag2 = false;
                                //缓存定责信息
                                this.$router.push({
                                    name: "evacuateOfScene",
                                    query: {
                                        accidentNo: this.accidentNo, //事故编号
                                    }
                                });
                            }else {
                                setTimeout(()=>{
                                    //放开按钮
                                    this.grayFlag = false;
                                    this.grayFlag2 = false;
                                    this.ismove = false;
                                    this.deleteBtnBgColor = '#F57979'; //校验完成再次置为红色
                                    this.smartCheckBtnBgColor = '#6794F5';
                                    this.checkFlag = true;
                                    //缓存定责信息
                                    this.$router.push({
                                        name: "evacuateOfScene",
                                        query: {
                                            accidentNo: this.accidentNo, //事故编号
                                        }
                                    });
                                }, 4000-nowTimeFlag)
                            }                        
                        }else {
                            if (nowTimeFlag > 4000) {
                                this.ismove = false;  //stop
                                this.grayFlag = false;
                                this.grayFlag2 = false;
                                //定责2次错误直接跳转填写用户信息
                                if(res.extend && res.extend.AIcount && res.extend.AIcount>=2) {
                                    this.$router.push({
                                        name: "evacuateOfScene",
                                        query: {
                                            accidentNo: this.accidentNo, //事故编号
                                            fromPage: "accidentPic"
                                        }
                                    });
                                    return;
                                };
                                //提示信息
                                this.$toast.message({
                                    message: res.message,
                                    color: '#F57979'
                                });
                            } else {
                                setTimeout(()=>{
                                    this.ismove = false;  //stop
                                    this.grayFlag = false;
                                    this.grayFlag2 = false;
                                    //定责2次错误直接跳转填写用户信息
                                    if(res.extend && res.extend.AIcount && res.extend.AIcount>=2) {
                                        this.$router.push({
                                            name: "evacuateOfScene",
                                            query: {
                                                accidentNo: this.accidentNo, //事故编号
                                                fromPage: "accidentPic"
                                            }
                                        });
                                        return;
                                    };
                                    //提示信息
                                    this.$toast.message({
                                        message: res.message,
                                        color: '#F57979'
                                    });
                                }, 4000-nowTimeFlag)
                            }
                            
                        }
                    })).catch((error) =>{
                        //console.log('----test----');
                        console.log(error);
                    });
                //}
            },
            //判断是否上传照片
            checkIsDownImg() {
                const datas = this.picList;
                let flag = true;
                for(let obj of datas){
                    if(!obj.uploadImg) {
                        flag = false;
                    }
                };
                return flag;
            },
            //保存图片信息
            saveImageInfo(obj,data) {
                console.log(obj);
                 //保存事故信息
                http.post(api.API_SAVE_IMG,{
                    accidentNo:this.accidentNo, //事件id
                    photoType: obj.photoType,
                    exif: obj.orientation || "1",  //方向
                    photoId: obj.key,
                    photoName: obj.name, //文件名
                    photoSize: obj.size,  //大小
                    photoPattern: obj.type  //后缀
                }).then(((res) => {
                    if(data) {
                        data.uploadImg = window.URL.createObjectURL(obj);
                        this.loadToggle = false; //关闭加载中提示
                        data.key = res.key;
                    }else{
                        this.otherImg.otherImgUrl = window.URL.createObjectURL(obj);
                        this.otherImg.key = res.key;
                        this.loadToggle = false; //关闭加载中提示
                    }
                })).catch((error) =>{
                    console.log(error);
                });
            },
            //获取图片下标
            getIndex(str) {
                if(!str)  return;
                return str.charAt(str.length-1);
            },
            // 获取图片的方向
            getPhotoDir(_file) {
              let self = this;
                //图片类型
               EXIF.getData(_file, function(){
                   self.orientation = EXIF.getTag(this, "Orientation");
               });
            },
            //删除照片
            deleteImg(data,index) {
                http.post(api.API_DELETE_SINGLE_IMG,{
                    photoId: data.key
                }).then(((res) => {
                    if(res.code=="1") {
                        //todo 删除图片
                        //this.deleteFlag = index;
                        //his.uploadImgArr.splice(index,1);
                        this.$toast.message({
                            message: '删除成功！',
                            color: '#4caf50'
                        });
                        if(data.otherImgUrl) {
                            //其他图片删除
                            //this.deleteFlag = 4;
                            //this.uploadImgArr.splice(4,1);
                            this.otherImg.otherImgUrl = "";
                        } else {
                            data.uploadImg = "";
                        }
                    };
                })).catch((error) =>{
                    console.log(error);
                });
            },
            //点击一键删除
            deleteAllImg() {
                if(this.grayFlag){
                    // 处于灰色状态 按钮不可用
                    return;
                }else{
                    this.$confirm('是否一键删除所有已上传的照片', '一键删除').then(({ result, value })=>{
                        //点击确定的操作
                            if(result) {
                                http.post(api.API_DELETE_ALL_IMG,{
                                    accidentNo: this.$route.query.id
                                }).then(((res) => {
                                    if(res.code=="1") {
                                        this.$toast.message({
                                            message: '删除成功！',
                                            color: '#4caf50'
                                        });
                                        //删除成功清楚本地显示
                                        const picList = this.picList;
                                        for(let obj of picList) {
                                            obj.uploadImg = "";
                                        };
                                        this.otherImg.otherImgUrl = "";
                                    };
                                })).catch((error) =>{
                                    console.log(error);
                                });
                            };
                    });
                }
            },
            // 扫描开始
            startMove() {
                this.ismove = true;
                this.timeFlag = new Date().getTime();   //  用于判断请求从发送到接收到返回数据的时间
                let NUM = -100;
                if(this.timer) {
                    clearInterval(this.timer);
                };
                this.timer = setInterval(()=>{
                    this.topNumber = NUM + "%";
                    if(NUM==30) {
                        NUM = -100;
                    } else {
                        NUM++;
                    }
                },15);
                // setTimeout(()=>{
                //     this.ismove = false;
                // }, 2000)
            }
        }
    }
</script>
<style lang="scss" scoped>
@import "~assets/css/mixin.scss";
    .grid-cell{
        width: 100%;
    }
    
    .accidentPic {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .upload-preview {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index:10000;
            display: none;
            text-align: center;
            .delete-btn {
                position: absolute;
                width: 0.24rem;
                height: 0.24rem;
                background: url(../../assets/img/delete.png) no-repeat;
                background-size: 100% 100%;
                right: 0.2rem;
                top: 0.2rem;
            }
        }
        .bg-preview {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index:10000;
            display: none;
            text-align: center;
            .delete-btn {
                position: absolute;
                width: 0.24rem;
                height: 0.24rem;
                background: url(../../assets/img/delete.png) no-repeat;
                background-size: 100% 100%;
                right: 0.2rem;
                top: 0.2rem;
                z-index: 200000;
            }
            img {
                max-width: 100%;
                max-height: 100%;
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
        }
        
    }
    .title-Wrap {
        height: 0.4rem;
    }
    .title {
        font-size: 0.16rem;
    }
    .accidentPic .title-Wrap {
        padding: 0.1rem 0 0 0.15rem;
    }

    .sec-picUp{
        flex: 1;
    }

    .picRows {
        display: flex;
        justify-content: space-around;
        flex-flow: row wrap;
        width: 3.6rem;
        margin: 0 auto;
    }
    .picShow {
        width: 1.65rem;
        height: 1.2rem;
        position: relative;
        border-radius: 0.05rem;
        overflow: hidden;
        background-color: #666;
    }
    .picShow_ {
        width: 1.65rem;
        height: 1.2rem;
        visibility: hidden;
    }
    .picShow>img {
        width: 100%;
        height: 100%;
    }
    .picShow span {
        display: block;
        width: 0.24rem;
        height: 0.24rem;
        background: url(../../assets/img/delete.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0.05rem;
        top: 0.05rem;
    }
    .upBtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.29)
    }
    .upBtn>img {
        width: 40%;
        height: auto;
    }
    .picRows p {
        color: #85898D;
        font-size: 0.15rem;
        text-align: left;
        margin: 0.1rem 0 0.2rem;
    }
    .picShow .hide {
        display: none;
    }
    .funBtn {
        display: flex;
        width: 3.45rem;
        margin: 0 auto;
        justify-content: space-between;
        color: #fff;
        font-size: 0.18rem;
        height: 0.48rem;
        line-height: 0.48rem;
        margin-bottom: rem(50);
    }
    .showBtn {
        color: #6794F5;
        float: right;
    }
    .promptWrap {
        display: none;
    }
    .promptBg {        
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.15);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .prompt {
        width: 2.7rem;
        height: 1.6rem;
        background-color: #fff;
        border-radius: 0.05rem;
    }
    .prompt h3 {
        font-size: 0.2rem;
        margin: 0.2rem 0 0.2rem;
    }
    .prompt p {
        font-size: 0.16rem;
        margin-bottom: 0.3rem;
    }
    .prompt>div {
        width: 100%;
        height: 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .prompt span {
        width: 50%;
        font-size: 0.16rem;
    }
    .color_red {
        color: #F16363;
    }
    //  扫描效果
    .scanWrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
    }
    .scanStyle {
        width: 100%;
        height: 100%;
        // background: url(../../assets/img/sm_bg.png) repeat-x;
        // background-size: 50% 100%;
        position: relative;
        top: -100%;
    }
    .show {
        display: block;
    }
    .picShow .hide_X {
        display: none;
    }
    .mu-carousel {
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
        position: fixed;
        height: rem(350);
        width: 100%;
        overflow: hidden;
        button {
            display: none;
        }

        .mu-carousel-item {
            > img {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                max-width: 100%;
                transform: translate3d(-50,-50,0);
                height: rem(250);
            }
        }
    }
    .mu-carousel-button.mu-icon-button {
        display: none !important;
    }
    .mu-button-wrapper {
        display: none !important;
    }
    .mu-carousel-svg-icon {
        display: none !important;
    }
    .picWrap {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.85);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .showPicSec {
        width: 100%;
        height: 40%;
    }
    .picWrap .yl {
        position: absolute;
        top: 75%;
        left: 50%;
        width: 0.4rem;
        height: 0.4rem;
        background: url(../../assets/img/delete.png) no-repeat;
        background-size: 100% 100%;
        transform: translate3d(-50%, -50%, 0);
    }
    // .mu-raised-button.blue {
    //     background-color:#6794F5;
    // }
    .mu-raised-button.blue {
        background-color: #6794F5;
    }
    .mu-raised-button {
        background-color:#F16363;
        color: #fff;
    }
    .mu-raised-button.disabled {
        background-color:#e6e6e6 !important;
        color:rgba(0, 0, 0, 0.3) !important;
    }
</style>

